import React, {useState} from 'react';
import {Button, Input, Table} from "antd";
import Search from "antd/es/input/Search";
import './style/sonTable.scss'

const dataSource = [
    {
        key: '1',
        coupon: '国庆节活动',
        commodity: '全部商品',
        contentCoupon: '满50减30',
        honoree: '无限制',
        honoreeTime: '无限制',
        repertory: '10000',
    },
    {
        key: '2',
        coupon: '重阳节活动',
        commodity: '全部商品',
        contentCoupon: '满50减30',
        honoree: '无限制',
        honoreeTime: '无限制',
        repertory: '10000',
    },
    {
        key: '3',
        coupon: '活动',
        commodity: '全部商品',
        contentCoupon: '满50减30',
        honoree: '无限制',
        honoreeTime: '无限制',
        repertory: '10000',
    },
];

const columns = [
    {
        title: '优惠卷',
        dataIndex: 'coupon',
        key: 'coupon',
    },
    {
        title: '适用商品',
        dataIndex: 'commodity',
        key: 'commodity',
    },
    {
        title: '优惠内容',
        dataIndex: 'contentCoupon',
        key: 'contentCoupon',
    },
    {
        title: '领取人限制',
        dataIndex: 'honoree',
        key: 'honoree',
    },
    {
        title: '限领次数',
        dataIndex: 'honoreeTime',
        key: 'honoreeTime',
    },
    {
        title: '剩余库存',
        dataIndex: 'repertory',
        key: 'repertory',
    },
    {
        title: '赠卷数',
        render: (text: any, record: any, index: any) =>(
            <>
                <Input placeholder='请输入'/>
            </>
        )
    }
]

const SonTable = () => {
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    return (
        <div>
            <div className='sonTableTo'>
                <div className='sonTableTo__a'>
                    <Button>优惠卷管理</Button>
                </div>

                <div className='sonTableTo__b'>
                    <Search placeholder="请输入关键词" style={{ width: 200 }} />
                </div>
            </div>
            <Table dataSource={dataSource} columns={columns} rowSelection={rowSelection}/>
        </div>
    );
};

export default SonTable;